/**
 * 课程详情模态框组件
 */

'use client';

import React from 'react';
import { Modal } from '../ui/modal';
import { ProcessedCourse } from '../../types/course';
import { MapPin, User, Users, BookOpen, Calendar, Clock, Award } from 'lucide-react';

export interface CourseDetailModalProps {
  /** 是否打开 */
  open: boolean;
  /** 打开状态变化回调 */
  onOpenChange: (open: boolean) => void;
  /** 课程信息 */
  course: ProcessedCourse | null;
}

export const CourseDetailModal: React.FC<CourseDetailModalProps> = ({
  open,
  onOpenChange,
  course
}) => {
  if (!course) return null;

  const getPatternText = (pattern: string) => {
    switch (pattern) {
      case 'every': return '每周';
      case 'odd': return '单周';
      case 'even': return '双周';
      default: return pattern;
    }
  };

  const getDayOfWeekText = (day: number) => {
    const days = ['', '周一', '周二', '周三', '周四', '周五', '周六', '周日'];
    return days[day] || '未知';
  };

  return (
    <Modal
      open={open}
      onOpenChange={onOpenChange}
      title="课程详情"
      className="max-w-md"
    >
      <div className="space-y-4">
        {/* 课程名称 */}
        <div className="text-center pb-4 border-b">
          <h2 className="text-xl font-bold text-gray-900 mb-2">
            {course.course_name}
          </h2>
          {course.courseType && (
            <div 
              className="inline-block px-3 py-1 rounded-full text-white text-sm font-medium"
              style={{ backgroundColor: course.color }}
            >
              {course.courseType}
            </div>
          )}
        </div>

        {/* 基本信息 */}
        <div className="grid grid-cols-1 gap-3">
          {/* 上课时间 */}
          <div className="flex items-center gap-3">
            <Clock className="w-5 h-5 text-blue-500 flex-shrink-0" />
            <div>
              <div className="font-medium text-gray-900">上课时间</div>
              <div className="text-sm text-gray-600">
                {getDayOfWeekText(course.day_of_week)} 第{course.section.start}-{course.section.end}节
              </div>
            </div>
          </div>

          {/* 上课地点 */}
          <div className="flex items-center gap-3">
            <MapPin className="w-5 h-5 text-green-500 flex-shrink-0" />
            <div>
              <div className="font-medium text-gray-900">上课地点</div>
              <div className="text-sm text-gray-600">
                {course.location.full_name || course.location.name || '未排地点'}
              </div>
            </div>
          </div>

          {/* 任课教师 */}
          <div className="flex items-center gap-3">
            <User className="w-5 h-5 text-purple-500 flex-shrink-0" />
            <div>
              <div className="font-medium text-gray-900">任课教师</div>
              <div className="text-sm text-gray-600">
                {course.teacher.name}
                {course.teacher.title && ` (${course.teacher.title})`}
              </div>
              {course.teacher.role && (
                <div className="text-xs text-gray-500 mt-0.5">
                  {course.teacher.role}
                </div>
              )}
            </div>
          </div>

          {/* 周次安排 */}
          <div className="flex items-center gap-3">
            <Calendar className="w-5 h-5 text-orange-500 flex-shrink-0" />
            <div>
              <div className="font-medium text-gray-900">周次安排</div>
              <div className="text-sm text-gray-600">
                第{course.weeks.start}-{course.weeks.end}周 ({getPatternText(course.weeks.pattern)})
              </div>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  );
};
